require(['./config'], () => {
    require(['jquery', 'artTemplate', 'loadHeaderFooter', 'jquery.cookie'], ($, template) => {
        //点击首页跳转
        $('.home').on('click', e => {

            location.href = 'http://localhost:8080/'
        })

        //渲染购物车商品数据
        //从本地存储中读取购物车数组的数据
        let cart = JSON.parse(localStorage.getItem('cart')) || []
        //渲染模板引擎
        const html = template('cart-template', { cart })
        $('main').append(html)
        //计算合计金额
        // calTotal()

        $('main')[0].onclick = e => {
            //删除商品
            if (e.target.classList.contains('operation1')) {
                console.log('1', cart);
                cart = cart.filter(prod => prod.id !== +e.target.getAttribute('data-id'))
                console.log('2', cart);
                //把筛选后的数组保存到本地存储

                localStorage.setItem('cart', JSON.stringify(cart))
                //遍历当前购物车的商品数量
                $('.table').each((k, v) => {
                    //通过id判断是不是当前点击删除按钮下的元素，是就删除DOM元素
                    if (v.getAttribute('data-id') === e.target.getAttribute('data-id')) {
                        v.remove()
                    }
                });
            }
        }

        //加减商品数量

        // const modifyAmount = e => {
        //     //当前点击的所在行
        //     const _tr = $(e.currentTarget).parents('.table')
        //     //获取当前行中的商品原始数量与商品id，价格
        //     let { amount, id, price } = _tr.data('prod')
        //     console.log({ amount, id, price });
        //     //判断加获减
        //     if ($(e.currentTarget).is('.minus')) {//如果当前点击的是mibus则减数量
        //         //判断数量是否大于1再进行减
        //         // console.log(48);
        //         if (amount > 1) {
        //             amount -= 1
        //             // console.log(51, $(e.currentTarget).is('.plus'));
        //         }

        //     } else if ($(e.currentTarget).is('.plus')) {
        //         // console.log(55, $(e.currentTarget).is('.plus'));
        //         //加数量
        //         amount += 1
        //         // console.log('57', amount);

        //     }

        //     // 遍历购物车中的数据，找到与当前id匹配的商品再修改数组中的数值


        //     cart.forEach(prod => {
        //         if (prod.id == id) {
        //             prod.amount = amount
        //         }
        //     })

        //     //重新保存购物车数组到本地存储中
        //     localStorage.setItem('cart', JSON.stringify(cart))
        //     //更新当前的商品价格
        //     $(e.currentTarget).parent().next().html((amount * price).toFixed(2))
        //     const prod = cart.find(p => p.id === id)
        //     _tr.data('prod', prod)
        //     //计算合计金额
        //     // calcTotal()
        // }
        // $('main').on('click', '.minus,.plus', modifyAmount)
        // $('.cart-body').on('blur', '.amount', modifyAmount)
        const btn2 = $('.plus'),
            btn1 = $('.minus'),
            value = $('.number input'),
            total = $('.total span i'),
            price = $('.price span i')
        for (let i = 0; i < btn2.length; i++) {
            //商品数量增加
            btn2[i].onclick = function () {
                value[i].value = value[i].value - 0 + 1
                cart[i].amount = value[i].value
                total[i].innerHTML = ((price[i].innerHTML - 0) * (value[i].value - 0)).toFixed(2)
                localStorage.setItem('cart', JSON.stringify(cart))
            }
            //商品数量减少
            btn1[i].onclick = function () {
                value[i].value = value[i].value - 0 - 1
                if (value[i].value <= 1) {
                    value[i].value = 1
                }
                cart[i].amount = value[i].value
                total[i].innerHTML = ((price[i].innerHTML - 0) * (value[i].value - 0)).toFixed(2)
                localStorage.setItem('cart', JSON.stringify(cart))
            }
        }
        // 全选，取消全选
        const all = $('.viscous b input')[0]
        const combined = $('.combined i')[0]
        const settlement = $('.settlement')[0]
        all.onclick = () => {
            const checked = $(all).prop('checked')
            $('.tbody .ipt').prop('checked', checked)

            const allcheck = $('.tbody .ipt').prop('checked')
            let sum = 0
            for (let i = 0; i < total.length; i++) {
                sum += total[i].innerHTML - 0
            }
            combined.innerText = sum
            settlement.classList.remove("settlement");
            settlement.classList.add("bgcolor");
            if (!checked) {
                combined.innerText = 0
                settlement.classList.add("settlement");
                settlement.classList.remove("bgcolor");
            }
        }
        $('.tbody .ipt').on('click', () => {
            if ($('.tbody .ipt:checked').length === $('.tbody .ipt').length) {
                $(all).prop('checked', true)

            } else {
                $(all).prop('checked', false)

            }


        })
        // $('.check_all').on('click', e => {
        //     // 当前复选框的选中状态
        //     const checked = $(e.target).prop('checked')
        //     // 修改所有商品的选中状态
        //     $('.prod_check').prop('checked', checked)
        //     // 计算合计
        //     // calcTotal()
        // })

        //计算合计金额

        // function calcTotal() {
        //     let sum = 0
        //     // console.log(87);
        //     $('.prod_check').each((index, element) => {
        //         const { price, amount } = $(element).parents('tr').data('prod')
        //         sum += price * amount
        //     })
        //     // 显示合计金额
        //     $('.jiage').html(sum.toFixed(2))
        // }
        // calcTotal()
    })


})
